

<template>
<!-- 组件名  ： 属性名  = “方法名” -->
    <TogglePurple @toggle-purple="handlePurpleChange">Purple</TogglePurple>

    <CircleColor :circleColor="circleColor"
    @change-circle-color="changeCircleColor"
    />
      
      <!-- 大小 -->
      <!-- <CircleSize :changeCircleSize="changeCircleSize" 
      :circleSize="circleSize"
      /> -->
      <!-- 旋转角度 --> 
        <!-- 子组件发生输入事件时，调用父组件的方法 -->
      <!-- <CircleRotate :changeCircleRotate="changeCircleRotate"
      :circleRotate="circleRotate"
      /> -->
      <CircleProperty :circleProperty="circleSize"
      :changeCircleProperty="changeCircleSize"
      >
        Circle Size
      </CircleProperty>

      
      <CircleProperty :circleProperty="circleRotate"
      :changeCircleProperty="changeCircleRotate"
      >
        Circle Rotate
      </CircleProperty>
      
      <Circle :circleClass="circleClass"
      :circleColor="circleColor"
      :circleStyle="circleStyle"
      />
</template>

<script>
import CircleSize from './components/CircleSize.vue';
import TogglePurple from './components/TogglePurple.vue'
import CircleRotate from './components/CircleRotate.vue'
import Circle from './components/Circle.vue'
import CircleColor from './components/CircleColor.vue'
import CircleProperty from './components/CircleProperty.vue'
export default {
  data() {
    return {
        isPurple: false,
        circleColor: "",
        circleSize: 200,
        circleRotate: 0,
    };
  },
  computed:{
    circleClass(){
        return this.isPurple ? 'purple' : ''         
    },
    circleStyle(){
        return  {height: this.circleSize + 'px',
        width: this.circleSize + 'px',
        lineHeight: this.circleSize + 'px',
        transform: `rotate(${this.circleRotate}deg)`}
    }
  },
  components: {
    TogglePurple,//注册组件
    CircleSize,
    CircleRotate,
    Circle,
    CircleColor,
    CircleProperty,
  },
  methods: {
    handlePurpleChange() {
      this.isPurple = !this.isPurple
    },
    changeCircleSize(value){
        this.circleSize = value//value是要接收的值
    },
    changeCircleRotate(value){
        this.circleRotate = value
    },
    changeCircleColor(value){
      this.circleColor = value
    }
  }
};
</script>


<style scoped>

</style>